import Vue from 'vue'
import App from './App.vue'
import {
  router
} from './router'
import store from './store'

import '@/assets/css/common.css'

import {
  generatorRouter
} from '@/libs/utils.js';

Vue.config.productionTip = false;

//进入路由守卫
router.beforeEach(async (to, from, next) => {

  //to: 即将跳转的路由地址/对象
  //from: 从哪跳转来的路由地址/对象
  //next: 放行,不做守卫拦截处理

  //没有登录权限时才去请求数据
  if (!store.state.hasAuth) {

    //触发请求数据
    await store.dispatch('setUserRouters');

    // //将请求数据格式化成路由配置的对象
    const newRoutes = generatorRouter(store.state.userRouters);

    // /**
    //  * console.log(newRoutes);
    //  * [
    //  *   {path: '/course', name: 'Course', children: Array(2), component: ƒ},
    //  *   {path: '/student', name: 'Student', children: Array(2), component: ƒ}
    //  * ]
    //  */

    // console.log(newRoutes); [{…}, {…}]

    //动态添加路由：将格式化后的树形结构的路由规则对象数组新增到路由列表
    router.createRouter(newRoutes);

    //addRoute(路由规则对象)
    newRoutes.map(r => {
      router.addRoute(r);
    });

    // console.log(router.getRoutes());
    //[{…}, {…}, {…}, {…}, {…}, {…}, {…}]

    //获取动态创建的路由列表
    const routesList = router.getRoutes();
    const matchPath = routesList.filter((item) => {
      // console.log(to.path);
      // /
      // /student/add
      // /22222

      // console.log(item.path);
      // /course/operate/info_data
      // /course/operate
      // /course/add
      // /course
      // /student/operate
      // /student/add
      // /student
      return item.path === to.path;
    });

    //没有登录权限仍然即将去访问路由对象名字为home的组件时
    if (to.name === 'Home') {
      // console.log('home: ' + to.path);

      //不做拦截处理
      next();
    } else if (to.name === 'NotFound' && matchPath.length <= 0) {
      //没有登录权限仍然即将去访问名字为NotFound的路由对象时
      //判断matchPath的长度为了区分NotFound 
      //此时NotFound包括:
      //1.除了路由列表里面的地址
      //2.路由列表里面的地址

      // console.log('router: ' + to.path);

      //当访问不存在的地址时不做任何的拦截处理
      next();

    } else {
      //当即将访问动态路由里的地址时

      // console.log('404: ' + to.path);
      next({
        //跳转到当前路由的地址
        path: to.path
      });

    }

    //BUG注意:
    //务必最后要设置store.state.hasAuth为true
    //否则再次进行路由守卫钩子判断hasAuth一直是false导致死循环一直向后端请求数据导致浏览器卡死
    store.dispatch('setAuth');

    // console.log(store.state.hasAuth);
    //true

  } else {
    //有权限时不用去请求数据
    next();
  }

});

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')